// 生成下拉菜单
export function dropDownButton({
  buttons,
  id,
  title
}){
  return {
    $$id: id,
    id: id,
    title,
    created(){
      this.position = {
        left: 0
      }
      const $$ = this.activePage.getElementsById.bind(this.activePage)
      this.optionsList = $$('case-button-options')
    },
    methods: {
      showOptions(){
        if (!this.hasClass('selected')) {
          this.computOptionsStyle(()=>{
            this.toggleClass('selected')
            this.optionsList.update({data: buttons, listClass: 'pits-case-drop-button-options selected'})
          })
        } else {
          this.toggleClass('selected')
          this.optionsList.removeClass('selected')
        }
      },
      computOptionsStyle(cb){
        const query = wx.createSelectorQuery().in(this)
        const sysInfo = wx.getSystemInfoSync()
        const {safeArea} = sysInfo
        query.select('#'+id).boundingClientRect()
        query.exec( res => {
          if (res[0].left !== this.position.left) {
            this.position.left = res[0].left
            const dyStyle = ` --drop-button-left: ${res[0].left}px; --drop-button-right: ${res[0].right}px; --drop-button-top: ${res[0].top}px; --drop-button-bottom: ${res[0].bottom}px; --drop-button-width: ${res[0].width}px; --drop-button-height: ${res[0].height}px; --safe-height: ${safeArea.height}px; --safe-width: ${safeArea.width}px; --safe-top: ${safeArea.top}px; --safe-left: ${safeArea.left}px; --safe-bottom: ${safeArea.bottom}px; --safe-right: ${safeArea.right}px; `
            this.activePage.setData({containerStyle: dyStyle}, cb)
          } else {
            cb()
          }
        })
      }
    },
    ready(){
      this.computOptionsStyle()
    },
    itemClass: 'iconfont pits-case-drop-button',
  }
}